<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试mvc连接</title>
		<!-- 这个东西不能不写结束标签 不能以/结尾 -->
		<script src="../../../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			function showTable(data){
				$("#d4_t1").html("<tr>"+
				"<th>id</th>"+
				"<th>姓名</th>"+
				"<th>年龄</th>"+
				"<th>性别</th>"+
				"</tr>");
				
				for (var i = 0; i < data.length; i++) {
					var str = "<tr align='center'>"+
					"<td>"+data[i].id+"</td>"+
					"<td>"+data[i].name+"</td>"+
					"<td>"+data[i].age+"</td>"+
					"<td>"+data[i].sex+"</td>"+
					"</tr>";
					$("#d4_t1").append(str);
				}	
			}
			
			function fn1(){
				$.ajax({
					url:"http://localhost:8090/user/getAll",
					data:$("#d4_f1").serialize(),
					success:function(data){
						showTable(data);//记得写参数
						
						console.log("SUCCESS!!!");
						
					},
					error:function(data){
						console.log("ERROR!!!!!");
					}
					
				})
			}
		</script>
	</head>
	<body>
		<form action="http://localhost:8090/user/getAll" method="post" id="d4_f1">
			<table>

				<tr>
					<td>
						<input type="text" placeholder="无......" />
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="ajax方式提交" onclick="fn1();" />
						<input type="submit" value="form方式提交" />
					</td>
				</tr>
			</table>


		</form>
		<a href="http://localhost:8090/user/getAll">http://localhost:8090/user/getAll</a>
		<div>
			<table id="d4_t1">
				<tr>
					<td colspan="4">
						<input type="text" placeholder="下面显示数据......" />
					</td>
				</tr>
		
			</table>
		
		</div>


	</body>
</html>
